<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>kongjian</title>
    <link rel="stylesheet" href="../css/frozen.css">
    <link rel="stylesheet" href="../css/font-awesome.css"/>
    <style>
        body{
            background-color: #eee;
            background-image: url("../img/bj.jpg");
            background-repeat: no-repeat;
            -webkit-overflow-scrolling : touch;
        }
        .myheader{
          background-color: transparent;

        }
        .ui-row-flex>.ui-col>p{
            margin-left: 13px;
        }
        .ui-col>.right{
          float: right;
            margin-top:18px ;
        }
        .ui-col>.left{
            float: right;
            margin-right: 10px;
        }
        .ui-col>.left>h5{
            margin-top: 10px;
        }

        .myshou{
           background-color: #ffffff;
        }
        .ui-searchbar{

        }
        .ui-grid-trisect-img>span{
            background-position: 100% 100%;
        }
    </style>
</head>
<body>
<!--头部-->
<header class="ui-header ui-header-positive header-fix myheader">
    <div class="ui-row-flex ">

            <div class="ui-col">
                <a href="qq.html">
                <i class="ui-icon-return qq-blue-c"></i><p>&nbsp;&nbsp;&nbsp;&nbsp;动态</p>
                </a>
            </div>

        <div class="ui-col ui-col-4">
            <ul class="ui-tiled  my-navs">
                <li>好友动态</li>
            </ul>
        </div>
        <div class="ui-col">
            <i class="ui-icon-add qq-blue-c"></i>
        </div>
    </div>
</header>
<!--尾部-->
<footer></footer>
<!--内容-->
<section class="ui-container" style="-webkit-overflow-scrolling : touch;">
        <div class="ui-selector-content my-scroller ui-scroller" style="display:block;background-color: transparent; ">
           <div>
                <div class="ui-row-flex ui-whitespace" style="padding-top: 35px">

                    <div class="ui-col ui-col">
                        <div class="ui-avatar-lg" style="margin-left: 10px">
                            <span style="background-image:url(../img/3.png)"></span>
                        </div>
                    </div>

                    <div class="ui-col ui-col" >
                        <div class="right">
                            <h5 style="color: #fff">契合：白羊座</h5>
                            <h5 style="color: #fff">提防：水瓶座</h5>
                            <div class="start" style="color: #ffbd15">
                                <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                            </div>
                        </div>
                        <div class="left">
                            <span class="fa fa-github-alt fa-2x " style="color: white;margin-top: 17px"></span>
                            <h5 style="color: #F9C325">处女座</h5>
                        </div>
                    </div>
                </div>
               <div class="ui-row-flex ui-whitespace" style="color: #fff; text-align: center;margin-top: 20px;font-size: 15px">
                   <div class="ui-col ui-col">相册</div>
                   <div class="ui-col ui-col">说说</div>
                   <div class="ui-col ui-col">个性化</div>
                   <div class="ui-col ui-col">小游戏</div>
                   <div class="ui-col ui-col">消息</div>
               </div>
                <div>
                    <ul class="ui-list ">
                        <li>
                            <div class="ui-avatar">
                                <span style="background-image:url(../img/1.png)"></span>
                            </div>
                            <div class="ui-list-info ui-border-t my-t" style="border-top: none">
                                <h4 class="ui-nowrap">吃葱大汉</h4>
                                <h5 class="ui-nowrap">今天18:14 <b style="color: #97ebff">自問 君は知らない</b></h5>
                            </div>
                            <i class="ui-icon-unfold"></i>
                        </li>
                        <li>
                            <h4>
                                等一场爱的遇见，等一个爱人的抵达，时间或长、或短，似乎都躲不过，尘缘里被人们称之为不了情的沦陷。有些人相遇，注定需要时间。有些人相爱，势必要经受些许磨难。在守望中等待，为真爱留白。
                            </h4>
                        </li>
                    </ul>
                    <ul class="ui-grid-trisect ui-border-b" style="background-color: #ffffff">
                        <li>
                            <div class="ui-grid-trisect-img">
                                <span style="background-image:url(../img/1.png)"></span>
                            </div>
                        </li>
                        <li>
                            <div class="ui-grid-trisect-img">
                                <span style="background-image:url(../img/1.png)"></span>
                            </div>
                        </li>
                        <li>
                            <div class="ui-grid-trisect-img">
                                <span style="background-image:url(../img/1.png)"></span>
                            </div>
                        </li>
                    </ul>
                    <ul class="ui-tiled " style="background-color: #ffffff">
                        <li style="margin-left: 15px"><div style="color: #c1c1c1">浏览14次</div></li>
                        <li><div></div></li>
                        <li><div><i class="ui-icon-liked"></i></div></li>
                        <li><div><i class="ui-icon-commented"></i></div></li>
                        <li><div><i class="ui-icon-share"></i></div></li>
                    </ul>
                    <ul class="ui-list ">
                        <li style="margin-left: 0">

                        </li>
                    </ul>
                    <ul class="ui-list  ui-border-tb">
                        <li class="ui-border-t">
                            <div class="ui-list-thumb-s">
                                <span class="ui-icon-liked" style="color: #4378dd"></span>
                            </div>
                            <div class="ui-list-info">
                                <h5 style="color: #4378dd">
                                    青龙 白虎叫姐姐 玄武大大 鬼姬的爱仕达等555人觉得很赞
                                </h5>
                            </div>
                        </li>
                        <li style="margin-right:15px;">
                            <div class="ui-searchbar-wrap ui-border-b" style="width: 100%">
                                <div class="ui-searchbar ui-border-radius">
                                    <div class="ui-searchbar-text">评论</div>
                                    <div class="ui-searchbar-input"><input value="" type="tel" placeholder="评论" autocapitalize="off"></div>
                                    <i class="ui-icon-close"></i>
                                </div>
                                <button class="ui-searchbar-cancel">取消</button>
                            </div>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul class="ui-list ">
                        <li>
                            <div class="ui-avatar">
                                <span style="background-image:url(../img/1.png)"></span>
                            </div>
                            <div class="ui-list-info ui-border-t my-t" style="border-top: none">
                                <h4 class="ui-nowrap">吃葱大汉</h4>
                                <h5 class="ui-nowrap">今天18:14 <b style="color: #97ebff">自問 君は知らない</b></h5>
                            </div>
                            <i class="ui-icon-unfold"></i>
                        </li>
                        <li>
                            <h4>
                                等一场爱的遇见，等一个爱人的抵达，时间或长、或短，似乎都躲不过，尘缘里被人们称之为不了情的沦陷。有些人相遇，注定需要时间。有些人相爱，势必要经受些许磨难。在守望中等待，为真爱留白。
                            </h4>
                        </li>
                    </ul>
                    <ul class="ui-grid-trisect ui-border-b" style="background-color: #ffffff">
                        <li>
                            <div class="ui-grid-trisect-img">
                                <span style="background-image:url(../img/1.png)"></span>
                            </div>
                        </li>
                        <li>
                            <div class="ui-grid-trisect-img">
                                <span style="background-image:url(../img/1.png)"></span>
                            </div>
                        </li>
                        <li>
                            <div class="ui-grid-trisect-img">
                                <span style="background-image:url(../img/1.png)"></span>
                            </div>
                        </li>
                    </ul>
                    <ul class="ui-tiled " style="background-color: #ffffff">
                        <li style="margin-left: 15px"><div style="color: #c1c1c1">浏览14次</div></li>
                        <li><div></div></li>
                        <li><div><i class="ui-icon-liked"></i></div></li>
                        <li><div><i class="ui-icon-commented"></i></div></li>
                        <li><div><i class="ui-icon-share"></i></div></li>
                    </ul>
                    <ul class="ui-list ">
                        <li style="margin-left: 0">

                        </li>
                    </ul>

                    <ul class="ui-list  ui-border-tb">
                    <li class="ui-border-t">
                        <div class="ui-list-thumb-s">
                            <span class="ui-icon-liked" style="color: #4378dd"></span>
                        </div>
                        <div class="ui-list-info">
                            <h5 style="color: #4378dd">
                                青龙 白虎叫姐姐 玄武大大 鬼姬的爱仕达等555人觉得很赞
                            </h5>
                        </div>
                    </li>
                    <li style="margin-right:15px;">
                        <div class="ui-searchbar-wrap ui-border-b" style="width: 100%">
                            <div class="ui-searchbar ui-border-radius">
                                <div class="ui-searchbar-text">评论</div>
                                <div class="ui-searchbar-input"><input value="" type="tel" placeholder="评论" autocapitalize="off"></div>
                                <i class="ui-icon-close"></i>
                            </div>
                            <button class="ui-searchbar-cancel">取消</button>
                        </div>
                    </li>
                </ul>
            </div>
           </div>
        </div>
</section>

<script src="../lib/zepto.min.js"></script>
<script src="../js/frozen.js"></script>
<script type="text/javascript">
$(function(){
    var scroll = new fz.Scroll('.ui-scroller', {
        scrollY: true,
        bounce:true
    });

    $(".ui-scroller")[0].ontouchend=function() {
        var s = scroll.getComputedPosition();
        scroll.refresh();
        console.log(s);
    };
    //监控 改变顶部颜色
        $(window).scroll(function(){
            var x=$(window).scrollTop()
            console.log(x)
            if(x>=220){
                $(".header-fix").css({"background-color":"#18b4ed"})
            }else{
                $(".header-fix").css({"background-color":"transparent"})
            }
        })





    $('.ui-searchbar').tap(function(){
        $('.ui-searchbar-wrap').addClass('focus');
        $('.ui-searchbar-input input').focus();
    });
    $('.ui-searchbar-cancel').tap(function(){
        $('.ui-searchbar-wrap').removeClass('focus');
    });
})
</script>
</body>
</html>